<template>
    <div class="c-menus">
        <ul>
            <li v-for="(item, idx) in menusList" :key="idx"
                @click="handleClick(item)"
                :class="{'active': item.name === $route.name}"
            >
                <span>{{ item.title }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "CMenus",
        props: {
            menusList: Array,
        },
        data() {
            return {};
        },
        methods: {
            handleClick(item) {
                this.$router.push({name: item.name});
            },
        }
    };
</script>

<style lang="less">
    .c-menus {
        min-height: 100%;
        border-right: 1px solid @color-border;

        >ul {
            >li {
                height: 40px;
                line-height: 40px;
                padding: 0 10px;
                border-bottom: 1px solid @color-border;
                color: @color-font;
                cursor: pointer;

                &:hover, &.active {
                    color: @color-base;
                }
            }
        }
    }
</style>
